<template>
  <div class="bc-home">
    <div v-if="!getIsPhone" class="pc">
      <MainHeader class="fixed-header"></MainHeader>
      <home-main 
        :winningInfo="winningInfo"
        :sideNavData="sideNavData"
      >
      </home-main>
      <home-entrance></home-entrance>
      <home-promise></home-promise>
      <bc-footer></bc-footer>
    </div>
    <!-- 手机 -->
    <div class="phone" v-else>
      <header-template-phone>
        <template v-slot:left>
          <header-menu></header-menu>
        </template>
        <template v-slot:center>
          <div class="img-wrapper">
            <img src="@/assets/imgs/logo.png" alt="">
          </div>
        </template>
        <template v-slot:right>
          <div>
            <span class="icon">
              <i class="iconfont icongd_zaixiankefu"></i>
            </span>
          </div>
        </template>
      </header-template-phone>
      <div class="bg">
        <banner-slider></banner-slider>
      </div>
      <div class="main">
        <div class="notice box-shadow">
          <svg class="svg" aria-hidden="true">
            <use xlink:href="#iconindex_gonggao"></use>
          </svg>
          <span class="notice-content"><marquee behavior="scroll" direction="left">尊敬的彩票33会员你好：目前苹果APP现已全面恢复下载,您使用手机浏览器输入633.cc进入网页后,选择App store即可下载【重庆时时彩】平台新版App，苹果注册即送8元彩金活动现已重新开启，感谢新老会员对平台的支持。 </marquee></span>
        </div>
        <div class="lotterys">
          <lottery-nav-phone></lottery-nav-phone>
        </div>
        <div class="games box-shadow">
          <div class="title">
            <span class="name">
              
            </span>
            <p class="content">
              <span class="">AG奖金池</span>
              <span class="amount">CNY<span>7711760.98</span></span>
            </p>
          </div>
          <div class="game-entrance" ref="entrance">
            <div class="wrapper">
              <home-entrance class="entrance"></home-entrance>
              <home-entrance class="entrance"></home-entrance>
            </div>
          </div>
        </div>
        <div class="hot box-shadow">
          <hot-lotterys-phone :winningInfo="winningInfo"></hot-lotterys-phone>
        </div>
      </div>
      <div class="footer">
        <footnav-phone></footnav-phone>
      </div>
    </div>
  </div>
</template>

<script>
import MainHeader from '@/components/header/main-header/main-header'
import BcFooter from '@/components/bc-footer/bc-footer'
import HomeMain from './components/home-main/home-main'
import HomeEntrance from './components/home-entrance/home-entrance'
import HomePromise from './components/home-promise/home-promise'
import LotteryNavPhone from '@/pages/home/components/lottery-nav-phone/lottery-nav-phone'
import HotLotterysPhone from '@/pages/home/components/home-lotterys-hot/hot-lotterys-phone'
import FootnavPhone from '@/components/base/phone/footnav-phone/footnav-phone'
import HeaderTemplatePhone from '@/components/base/phone/header-template-phone/header-template-phone'
import BannerSlider from '@/components/banner-slider/banner-slider'
import HeaderMenu from '@/components/base/header-menu/header-menu'
import { mapGetters } from 'vuex'
export default {
  components: {
    MainHeader,
    BcFooter,
    HomeMain,
    HomeEntrance,
    HomePromise,
    LotteryNavPhone,
    HotLotterysPhone,
    FootnavPhone,
    HeaderTemplatePhone,
    BannerSlider,
    HeaderMenu
  },
   data() {
    return {
      // 侧边栏tab数据
      sideNavData: {
        lotterys: [
          {
          id: 1,
          navItem: [
            {
              id: 1,
              name: "时时彩"
            },
            {
              id: 2,
              name: '最火爆的快彩'
            }
          ],
          subLotterys: [
              {
                id: 1,
                tab: '时时彩',
                type: '重庆时时彩',
                dateNo: '119217',
                drawTime: new Date().getTime() + 10000,
                bg: require('@/assets/imgs/caizhong_bj_01.svg'),
                icon: 'iconicon_chongqingshishi',
                path: '/select-number/cqssc'
              },
              {
                id: 2,
                tab: '时时彩',
                type: '急速时时彩',
                dateNo: '119217',
                drawTime: new Date().getTime() + 10000,
                bg: require('@/assets/imgs/caizhong_bj_01.svg'),
                icon: 'iconicon_jisushishicai'
              },
              {
                id: 3,
                tab: '时时彩',
                type: '天津时时彩',
                dateNo: '119217',
                drawTime: new Date().getTime() + 10000,
                bg: require('@/assets/imgs/caizhong_bj_02.svg'),
                icon: 'iconicon_tianjinshishica'
              },
              {
                id: 4,
                tab: '时时彩',
                type: '新疆时时彩',
                dateNo: '119217',
                drawTime: new Date().getTime() + 10000,
                bg: require('@/assets/imgs/caizhong_bj_04.svg'),
                icon: 'iconicon_xinjiangshishic'
              },
            ],
          icon: 'iconindex_shishicai'
          },
          {
            id: 2,
            navItem: [
              {
                id: 1,
                name: "赛车"
              },
              {
                id: 2,
                name: '彩友中200注'
              }
            ],
            subLotterys: [
                    {
                      id: 1,
                      tab: '赛车',
                      type: '北京赛车',
                      dateNo: '119217',
                      drawTime: new Date().getTime() + 10000,
                      imgUrl: '',
                      path: '/select-number/bjsc',
                      bg: require('@/assets/imgs/caizhong_bj_06.svg'),
                      icon: 'iconicon_jisupk'
                    },
                    {
                      id: 2,
                      tab: '赛车',
                      type: '幸运飞艇',
                      dateNo: '119217',
                      drawTime: new Date().getTime() + 10000,
                      imgUrl: '',
                      bg: require('@/assets/imgs/caizhong_bj_02.svg'),
                      icon: 'iconCZ_Icon_xingyunfeiti'
                    },
                    {
                      id: 3,
                      tab: '赛车',
                      type: '极速赛车',
                      dateNo: '119217',
                      drawTime: new Date().getTime() + 10000,
                      imgUrl: '',
                      bg: require('@/assets/imgs/caizhong_bj_01.svg'),
                      icon: 'iconCZ_Icon_beijingsaich'
                    },
                    {
                      id: 4,
                      tab: '赛车',
                      type: '极速飞艇',
                      dateNo: '119217',
                      drawTime: new Date().getTime() + 10000,
                      imgUrl: '',
                      bg: require('@/assets/imgs/caizhong_bj_02.svg'),
                      icon: ''
                    },
                  ],
            icon: 'iconindex_saiche'
          },
          {
            id: 3,
            navItem: [
              {
                id: 1,
                name: "11选5"
              },
              {
                id: 2,
                name: '4500万派奖',
                highlight: true
              }
            ],
            subLotterys: [
                    {
                      id: 1,
                      tab: '11选5',
                      type: '山东11选5',
                      dateNo: '119219',
                      drawTime: new Date().getTime() + 10000,
                      bg: require('@/assets/imgs/caizhong_bj_08.svg'),
                      icon: 'iconicon_shandongxuan'
                    },
                    {
                      id: 2,
                      tab: '11选5',
                      type: '广东11选5',
                      dateNo: '119219',
                      drawTime: new Date().getTime() + 10000,
                      bg: require('@/assets/imgs/caizhong_bj_07.svg'),
                      icon: 'iconicon_guangdongxuan'
                    },
                    {
                      id: 3,
                      tab: '11选5',
                      type: '急速11选5',
                      dateNo: '119219',
                      drawTime: new Date().getTime() + 10000,
                      path: '/select-number/11xuan5',
                      bg: require('@/assets/imgs/caizhong_bj_01.svg'),
                      icon: 'iconCZ_Icon_jisuxuan'
                    },
                  ],
            icon: 'iconindex_xuan'
          },
          {
            id: 4,
            navItem: [
              {
                id: 1,
                name: "快三"
              },
              {
                id: 2,
                name: '投掷筛子'
              },
              {
                id: 3,
                name: '轻松中奖'
              }
            ],
            subLotterys: [
                {
                  id: 1,
                  type: '幸运快三',
                  tab: '快三',
                  dateNo: '119219',
                  drawTime: new Date().getTime() + 10000,
                  bg: require('@/assets/imgs/caizhong_bj_03.svg'),
                  icon: 'iconLy_kuai_xingyun',
                  path: '/select-number/kuaisan'
                },
                {
                  id: 2,
                  tab: '快三',
                  type: '安徽快三',
                  dateNo: '119219',
                  drawTime: new Date().getTime() + 10000,
                  imgUrl: '',
                  bg: require('@/assets/imgs/caizhong_bj_04.svg'),
                  icon: 'iconicon_anhuikuaisan'
                },
                {
                  id: 3,
                  tab: '快三',
                  type: '甘肃快三',
                  dateNo: '119219',
                  drawTime: new Date().getTime() + 10000,
                  imgUrl: '',
                  bg: require('@/assets/imgs/caizhong_bj_08.svg'),
                  icon: 'iconLy_kuai_gansu'
                },
              ],
            icon: 'iconindex_kuai'
          },
        ],
        others: [
          {
            id: 5,
            navItem: [
              {
                id: 1,
                name: "AG视讯国际厅",
                active: true
              },
              {
                id: 2,
                name: '旗舰厅'
              },
              {
                id: 3,
                name: '欧洲厅'
              },
              {
                id: 4,
                name: '竟咪'
              },
              {
                id: 5,
                name: '包桌'
              },
              {
                id: 6,
                name: '多台'
              }
            ],
            icon: '',
            high: 'true',
            color: 'yellow'
          },
          {
            id: 6,
            navItem: [
              {
                id: 1,
                name: "AG电子"
              },
              {
                id: 2,
                name: '皇冠体育'
              },
              {
                id: 3,
                name: '斗牛'
              }
            ],
            icon: '',
            high: true,
            color: 'red'
          }
        ]
      },
      // 彩票中奖数据
      winningInfo: [
        {
          id: 2,
          lotteryName: '重庆时时彩',
          icon: '',
          path: '/select-number/cqssc',
          dateNo: '191119',
          previous: {
            dateNo: '191118',
            numbers: '1,2,3,4,5',
            context: '龙，虎，单，双，全',
          },
          drawTime: new Date().getTime() + 100000000
        },
        {
          id: 3,
          lotteryName: '北京赛车',
          dateNo: '191119',
          previous: {
            dateNo: '20191118',
            numbers: '1,2,3,4,8,9,10',
            context: '13,大,小,单,双',
            icon: '',
          },
          drawTime: new Date().getTime() + 10000000,
          path: '/select-number/bjsc'
        },
        {
          id: 4,
          lotteryName: '新疆时时彩',
          dateNo: '191119',
          previous: {
            dateNo: '191118',
            numbers: '18,4,1,8,3,9',
            context: '龙,虎,双',
          },
          drawTime: new Date().getTime() + 100000000
        },
        {
          id: 5,
          lotteryName: '幸运快三',
          dateNo: '191119',
          previous: {
            dateNo: '191118',
            numbers: '1,2,3,4,5',
            context: '龙,虎,单,双,全',
          },
          drawTime: new Date().getTime() + 10000000,
          path: '/select-number/xyks'
        },
        {
          id: 6,
          lotteryName: '幸运飞艇',
          dateNo: '191119',
          previous: {
            dateNo: '191118',
            numbers: '1,2,3,4,5',
            context: '龙,虎,单,双,全',
          },
          drawTime: new Date().getTime() + 10000000
        },
        {
          id: 7,
          lotteryName: '广东11选5',
          dateNo: '191119',
          previous: {
            dateNo: '191118',
            numbers: '1,2,3,4,5',
            context: '13,大,单,龙,闲,对子,半顺',
          },
          drawTime: new Date().getTime() + 100000000
        }
      ],
      // 手机端账户操作
      accountOperate: [
        {
          id: 1,
          icon: '',
          context: '充值',
          icon: 'iconzijin_chongzhi',
          bg: require('@/assets/imgs/caizhong_bj_01.svg')
        },
        {
          id: 2,
          icon: '',
          context: '提现',
          icon: 'iconzijin_tixian',
          bg: require('@/assets/imgs/caizhong_bj_02.svg')
        },
        {
          id: 3,
          icon: '',
          context: '转换',
          icon: 'iconzijin_zhuanhuan',
          bg: require('@/assets/imgs/caizhong_bj_07.svg')
        }
      ],
      // 手机导航栏
      navItems_head: [
        {
          id: 1,
          icon: 'iconnav_goucai',
          context: '彩票'
        },
        {
          id: 2,
          icon: 'iconnav_shixun',
          context: '视讯'
        },
        {
          id: 3,
          icon: 'iconnav_dianzi',
          context: '电子'
        },
        {
          id: 4,
          icon: 'iconnav_saishi',
          context: '赛事'
        },
        {
          id: 5,
          icon: 'iconnav_qipai',
          context: '棋牌'
        },
        {
          id: 6,
          icon: 'iconnav_huodong',
          context: '活动'
        },
      ],
      
    }
  },
  methods: {
   
  },
  computed: {
    ...mapGetters('lottery', ['getIsPhone']),
   
  }
}
</script>

<style lang="stylus" scoped>
  @import '~@/assets/styles/variables.styl'
  @import '~@/assets/styles/mixins.styl'
  .bc-home
    .pc
      box-sizing border-box 
      padding-top 128px
      .fixed-header 
        position fixed 
        top 0 
        left 0
        right 0
        z-index 99
    @media screen and (max-width: 750px)
      .game-entrance >>> .entrance-pic 
        width 190px
        border none
        margin-right 10px
        overflow hidden
        img 
          vertical-align middle
      .game-entrance >>> .home-entrance
        margin 5px 0
        height 117px
      .hot >>> .hot-lotterys
        position static
        width auto 
        max-width 750px
        .nav-top-bar
          width 100%
          height 40px
          line-height 40px
          .nav-item 
            min-width 90px
            .svg-wrapper
              left 9px
        .lottery-record 
          height 152px
          .number-info 
            width 100%
            .top-info 
              box-sizing border-box 
              padding-left 10px
              padding-top 10px
              margin 0
              .number-bar 
                padding 0 7px
                font-size 0
                span 
                  font-size 14px 
            .bottom-info 
              margin 22px 0
              .numbers 
                justify-content center
                span 
                  margin-right 20px
                  &:last-child 
                    margin-right 0
          .general
            box-sizing border-box 
            padding 0 10px 
            justify-content space-between
            margin-bottom 10px
            .left 
              display flex 
              align-items center
              .times 
                margin-left 10px
            
      .phone 
        max-width 750px  
        width auto
        box-sizing border-box 
        padding-bottom 58px
        .icon 
          extend-click()
        .img-wrapper
          width 80px
          img 
            width 100%
        .bg 
          height 0 
          background #00bcd4
          position relative 
          padding-bottom 34%
          padding-top 48px
          .extra 
            position absolute 
            top 48px
            left 0
            right 0 
            width 100%
            z-index 1000
            .navbar
              width 100%
              height 72px 
              background $color-theme-dark
              box-sizing border-box 
              padding 0 10px
        .main 
          box-sizing border-box 
          .notice 
            display flex 
            align-items center
            height 36px 
            background #fff
            margin-bottom 10px
            box-sizing border-box 
            padding-left 10px
            .svg 
              font-size 19px
            .notice-content 
              flex 1
              overflow hidden
              margin-left 10px
          .lotterys 
            height 90px 
            background red
            margin-bottom 10px
            background #fff
            box-sizing border-box 
            padding 0 10px
            box-shadow 0px 3px 6px 0px rgba(0, 0, 0, 0.1)
          .games 
            height 172px 
            background #fff
            margin-bottom 10px
            .title 
              height 40px
              display flex
              align-items center
              .name 
                width 77px
                height 10px
              .content
                margin-left 10px
                .amount 
                  color $color-theme-red
            .game-entrance 
              width 100% 
              padding-left 10px
              position relative
              overflow hidden
              height 118px
              box-sizing border-box
              .wrapper 
                display flex
                position absolute 
                left: 0
                top: 0
                margin: 0
                padding: 0
                z-index 100   
                -webkit-animation: 10s move infinite linear
                width 1600px 
                &:hover
                  -webkit-animation-play-state: paused
          .hot 
            height 192px 
        .footer 
          position fixed 
          left 0
          right 0
          bottom 0
          height 48px
          background #fff
          box-shadow 0px -5px 10px 0px rgba(0, 0, 0, 0.1), 0px 1px 0px 0px rgba($color-divide-line,1);
    @keyframes move {
      0% {
        left: 0;
      }
      100% {
        left: -800px;
      }
    }
</style>